import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'
//Inject just dispatch and don't listen to store
let AddTodo = ({dispatch}) => {
	let input 
	return (
		<div className="header">
			<h1>todos</h1>
			<form onSubmit={e => {
				e.preventDefault();
				if(!input.value.trim()) return
				dispatch(addTodo(input.value))
				input.value = ''
			}}>
				<input ref={node => {
					input = node
				}} autoFocus className="new-todo"/>
			</form>
		</div>
	)
}


export default connect()(AddTodo)
